/**
 * Created by Administrator on 2025/10/22.
 */

/*
    在 JavaScript 中，可以使用 var、let 和 const 关键字来声明变量
        var：ES5 引入的变量声明方式，具有函数作用域。
        let：ES6 引入的变量声明方式，具有块级作用域
        const：ES6 引入的常量声明方式，具有块级作用域，且值不可变

        var carname;    //在执行左边语句后，变量 carname 的值将是 undefined

        在javascript的对象里面创建对象方法(其实就是对象里面的函数)
        函数名称:function(){

        }


        并且javascript对大小写敏感

        如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。

        HTML 中的全局变量
        在 HTML 中, 全局变量是 window 对象，所以 window 对象可以调用函数内的未声明（未加 var)的局部变量
 */

/*
    在 HTML 中, 全局变量是 window 对象，所以 window 对象可以调用函数内的未声明（未加 var)的局部变量
*/
function MyFunction() {
    CarName="Volve";
}
document.getElementById("demo").innerHTML="我可以显示" + window.CarName;

//下面的对象变量是在函数外部定义的，所以是全局变量

var Person={
    FirstName:"John",
    LastName:"Doe",
    ID:5566,
    FullName:function () {
        return this.FirstName + "" + this.LastName;
    }
};


// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
    initializeApp();
    setupEventListeners();
    updateLayoutInfo();
});

// 初始化应用
function initializeApp() {
    console.log('全屏图片布局应用初始化完成');

    // 设置默认布局
    setLayout('horizontal');
    Person.FullName(); //会输出  John Doe
    Person.FullName;   //会输出 函数的定义 即   function() { return this.FirstName + " " + this.LastName; }
}

// 设置事件监听器
function setupEventListeners() {
    // 布局按钮点击事件
    const layoutButtons = document.querySelectorAll('.layout-btn');
    layoutButtons.forEach(button => {
        button.addEventListener('click', function() {
        const layout = this.getAttribute('data-layout');
        setLayout(layout);
        updateActiveButton(this, layoutButtons);
    });
});

    // 图片选择按钮点击事件
    const selectButtons = document.querySelectorAll('.select-btn');
    selectButtons.forEach(button =>{
        button.addEventListener('click', function() {
        const side = this.getAttribute('data-side');
        changeImage(side);
    });
});

    // 效果控制滑块事件
    const effectSliders = document.querySelectorAll('.effect-item input[type="range"]');
    effectSliders.forEach(slider => {
        slader.addEventListener('input', function() {
        updateImageEffects();
    });
});

    // 窗口调整大小事件
    window.addEventListener('resize', handleResize);

    // 键盘快捷键
    document.addEventListener('keydown', handleKeyboard);
}

// 设置布局模式
function setLayout(layout) {
    const container = document.querySelector('.container');
    const leftSection = document.querySelector('.left-section');
    const rightSection = document.querySelector('.right-section');

    // 移除之前的布局类
    container.classList.remove('horizontal-layout', 'vertical-layout');

    switch(layout) {
        case 'horizontal':
            container.classList.add('horizontal-layout');
            leftSection.style.width = '75vw';
            leftSection.style.height = '100vh';
            rightSection.style.width = '25vw';
            rightSection.style.height = '100vh';
            break;
        case 'vertical':
            container.classList.add('vertical-layout');
            leftSection.style.width = '100vw';
            leftSection.style.height = '75vh';
            rightSection.style.width = '100vw';
            rightSection.style.height = '25vh';
            break;
    }

    updateLayoutInfo();
}

// 更换图片
function changeImage(side) {
    const imageId = side === 'left' ? 'leftImage' : 'rightImage';
    const image = document.getElementById(imageId);

    // 添加淡出效果
    image.style.opacity = '0';

    setTimeout(() => {
        const randomNum = Math.floor(Math.random() * 100) + 1;
    const newSrc = `https://picsum.photos/${side === 'left' ? '1600/900' : '800/600'}?random=${randomNum}`;
    image.src = newSrc;
    image.style.opacity = '1';
}, 300);
}

// 更新图片效果
function updateImageEffects() {
    const opacity = document.getElementById('opacity').value;
    const blur = document.getElementById('blur').value;

    const leftImage = document.getElementById('leftImage');
    const rightImage = document.getElementById('rightImage');

    leftImage.style.opacity = `${opacity}%`;
    rightImage.style.opacity = `${opacity}%`;

    leftImage.style.filter = `blur(${blur}px)`;
    rightImage.style.filter = `blur(${blur}px)`;
}

// 处理窗口调整大小
function handleResize() {
    console.log('窗口大小已调整:', window.innerWidth, 'x', window.innerHeight);
    updateLayoutInfo();
}

// 处理键盘快捷键
function handleKeyboard(event) {
    switch(event.key) {
        case '1':
            changeImage('left');
            break;
        case '2':
            changeImage('right');
            break;
        case 'h':
            setLayout('horizontal');
            break;
        case 'v':
            setLayout('vertical');
            break;
    }
}

// 更新活动按钮状态
function updateActiveButton(activeButton, buttons) {
    buttons.forEach(button => button.classList.remove('active'));
    activeButton.classList.add('active');
}

// 更新布局信息显示
function updateLayoutInfo() {
    const width = window.innerWidth;
    const height = window.innerHeight;

    console.log(`当前布局: 左侧${width * 0.75}px, 右侧${width * 0.25}px, 总宽度${width}px`);
}

// 图片加载错误处理
document.querySelectorAll('.main-image').forEach(image => {
    image.addEventListener('error', function() {
    console.error('图片加载失败:', this.src);
    // 使用备用图片
    this.src = 'https://picsum.photos/1600/900?random=99';
});
});